<template>
  <div class="learn-condition-div">
    <div class="learn-data-show">
      <div class="data-card">
        <div class="data-font">
          <count-to :startVal="0" :endVal='workCount' :duration='1200'></count-to>
        </div>
        <div>累计作业数</div>
      </div>

      <div class="data-card">
        <div class="data-font"><count-to :startVal="0" :endVal='3' :duration='1200'></count-to></div>
        <div>
          开播次数
        </div>
      </div>

      <div class="data-card">
        <div class="data-font"><count-to :startVal="0" :endVal='1' :duration='1200'></count-to></div>
        <div>
          累计提问次数
        </div>
      </div>

      <div class="data-card">
        <div class="data-font"><count-to :startVal="0" :endVal='4' :duration='1200'></count-to></div>
        <div>
          累计签到次数
        </div>
      </div>
    </div>

    <div class="data-histogram">
      <div class="histogram-chart">
        <ve-histogram :data="signData" :data-zoom="signZoom" :events="signEvent"></ve-histogram>
      </div>
      <div class="histogram-sign-record">
        <el-tag type="warning">
        点击左侧柱状图查看签到的学生名单
        </el-tag>
        
        <div style="margin-top:2%" v-if="stuSignRecordShow">
            <el-select v-model="className" placeholder="请选择" size="small">
            <el-option
              v-for="classInfo in classInfos"
              size="small"
              :key="classInfo.classId"
              :label="classInfo.className"
              :value="classInfo.classId">
            </el-option>
          </el-select>
              <el-radio style="margin-left:1%"  v-model="searchFilter" size="small" label="1" border>已签到</el-radio>
              <el-radio style="margin-left:-5%" v-model="searchFilter" size="small" label="2" border>未签到</el-radio>
              
              <el-table
              height="350"
              :data="stuData"
              style="width: 100%">
              <el-table-column
                prop="stuId"
                label="学号"
                height="100">
              </el-table-column>
              <el-table-column
                prop="stuName"
                label="姓名"
                height="100">
              </el-table-column>
              <el-table-column
                prop="className"
                label="班级"
                height="100">
              </el-table-column>

            </el-table>
        </div>
      </div>
    </div>

     <el-divider></el-divider>

     <div>
      <el-tabs v-model="activeName" type="card"  @tab-click="handleTabClick()">
        <el-tab-pane label="完成人数" name="finish">

          <div class="workFinish-div">
            <div class="workFinish-progress">
              <div>
              作业平均完成率
              </div>
              <el-progress style="margin-top:2%;" type="circle" :width="250" color="#FED049" :percentage="submissionRate"></el-progress>
            </div>
            <div class="histogram-chart"  v-if="worlDataIsShow">
              <ve-histogram :data="workData" :data-zoom="signZoom" :events="workEvent">
                <div class="data-empty" v-if="workData.rows.length == 0">没有数据😂</div>
              </ve-histogram>
            </div>
          </div>

        </el-tab-pane>
        <el-tab-pane label="得分率" name="score">
             <div class="workFinish-div">
              <div class="workFinish-progress">
                <div>
                作业平均得分率
                </div>
                <el-progress style="margin-top:2%;" type="circle" :width="250"  color="#FED049" 
                :percentage="scoringRate"></el-progress>
            </div>
            <div class="histogram-chart" v-if="!worlDataIsShow">
              <ve-line :data="workScoreData" :data-zoom="signZoom" :events="workEvent">
                <div class="data-empty" v-if="workScoreData.rows.length == 0">没有数据😂</div>
              </ve-line>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>

            <el-tag type="warning" style="margin-left:1%;margin-bottom:2%;">
            点击右上方 柱状图/折线图 查看学生名单
            </el-tag>
         <div v-if="stuWorkRecordShow">
          
            <el-select v-model="workClassName" placeholder="请选择" size="small" style="margin-left:1%;">
                <el-option
                  v-for="classInfo in classInfos"
                  size="small"
                  :key="classInfo.classId"
                  :label="classInfo.className"
                  :value="classInfo.classId">
                </el-option>
            </el-select>
            <el-radio style="margin-left:1%"  v-model="worlSearchFilter" size="small" label="1" border>已提交</el-radio>
            <el-radio style="margin-left:-2%" v-model="worlSearchFilter" size="small" label="2" border>未提交</el-radio>

            <div style="margin-top:2%;">
                <el-table
                  height="350"
                  :data="stuWorkData"
                  style="width: 100%">
                  <el-table-column
                    prop="stuId"
                    label="学号"
                    height="100">
                  </el-table-column>
                  <el-table-column
                    prop="stuName"
                    label="姓名"
                    height="100">
                  </el-table-column>
                  <el-table-column
                    prop="className"
                    label="班级"
                    height="100">
                  </el-table-column>
                  <el-table-column
                    prop="score"
                    label="得分"
                    height="100">
                  </el-table-column>
                </el-table>

            </div>

        </div>

     </div>

  </div>
</template>

<script>
import countTo from 'vue-count-to';
import { getWorkCondition } from '../../api/course';

export default {
    props:["courseId"],
    components:{
      countTo
    },
    data() {
      return {
        workCount:0,
        scoringRate:0.0,
        submissionRate:0.0,
        className: "",
        workClassName: "",
        activeName: "finish",
        worlDataIsShow: true,
        searchFilter: "1",
        worlSearchFilter: "1",
        classInfos:[
          {classId:1001,className:"3G软件1702"},
          {classId:1002,className:"3G软件1701"}
        ],
        stuData: [
          {
            "stuId":"541713140206",
            "stuName":"胡一涵",
            "className":"3G软件1702"
          },
        ],
        stuWorkData:[
          {
            "stuId":"541713140206",
            "stuName":"胡一涵",
            "className":"3G软件1702",
            "score": 4,
          },
          {
            "stuId":"541713140206",
            "stuName":"jxd",
            "className":"3G软件1702",
            "score": 3.5,
          },
        ],
        stuWorkRecordShow: false,
        stuSignRecordShow: false,
        signEvent: {
          click: (e) => {
            console.log(e.name + ":" + e.data)
            // console.log(this.f + e)
            this.stuSignRecordShow = true
          }
        },
        signZoom: [
          {
            type: 'slider',
            start: 0,
            end: 30
          }
        ],
        signData: {
          columns: ['日期', '签到人数'],
          rows: [
            { '日期': '2021-05-06 15:20:37', '签到人数': 99},
            { '日期': '2021-05-06 15:25:58', '签到人数': 30},
            { '日期': '2021-05-06 16:30:23', '签到人数': 60},
            { '日期': '2021-05-07 12:03:23', '签到人数': 50},
          ]
        },
        workData:{
          columns: ['作业名', '完成人数'],
          rows: [
          ]
        },
        workScoreData:{
          columns: ['作业名', '得分率'],
          rows: [
          ]
        },
        workEvent: {
          click: (e) => {
            console.log(e.name + ":" + e.data)
            this.stuWorkRecordShow = true
          }
        },
      }
    },
    methods: {
      handleTabClick() {
        if(this.activeName == 'finish') {
          this.worlDataIsShow = true
        }else {
          this.worlDataIsShow = false
        }
      }
    },
    mounted() {
         if (this.courseId != undefined) {
           getWorkCondition(this.courseId).then(res => {
             if (res.code == 200) {
               this.workCount = res.data.workCount
               this.scoringRate = Math.floor(res.data.scoringRate * 10000 ) / 100
               this.submissionRate = Math.floor(res.data.submissionRate * 10000 ) / 100
               
               if (res.data.workCondition != null) {
                 this.signZoom[0]
                 res.data.workCondition.forEach(work => {
                   this.workData.rows.push({
                      '作业名': work.workName, '完成人数': work.submitCount
                   })
                   this.workScoreData.rows.push({
                      '作业名': work.workName, '得分率': work.scoringRate
                   })
                 });
               }
             }
           })
         }
    }
}
</script>

<style>
.learn-condition-div {
  margin: 2%;
  width: 96%;
  min-height: 1000px;
}

.learn-data-show {
  height: 100px;
  width: 100%;
  /* background-color: tomato; */

  display: flex;
  justify-content: space-around;
}

.data-card {
  width: 200px;
  height: 80px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0 2px 12px   0px rgb(0 0 0 / 15%);

  display: flex;
  flex-direction: column;
  justify-content: center;

}

.data-font {
  font-size: 30px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}

.data-histogram {
  margin-top: 2%;
  display: flex;
  width: 100%;
  justify-content: space-around;

}

.histogram-chart {
  width: 400px;
  height: 400px;
}

.histogram-sign-record {
  width: 450px;
  height: 400px;
}

.workFinish-div {
  display: flex;
  justify-content: space-around;
}

.workFinish-progress {
  width: 400px;
  height: 400px;
  margin-top: 5%;
  text-align: center;;
  /* display: flex; */
  /* justify-content: center; */
}

.data-empty {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, .7);
  color: #888;
  font-size: 14px;
}


</style>